<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .hover-scale {
                transition: transform 0.2s ease-in-out;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">学生成绩管理系统</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="add-student-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-all duration-200 shadow-md hover:shadow-lg">
                    <i class="fa fa-plus mr-2"></i>
                    <span>添加学生</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 筛选和排序区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 shadow-md">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-filter text-primary"></i>
                    <h2 class="text-lg font-semibold text-dark">筛选与排序</h2>
                </div>

                <div class="flex flex-wrap gap-3 w-full md:w-auto">
                    <div class="relative">
                        <select id="sort-subject" class="appearance-none bg-gray-100 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="name">按姓名排序</option>
                            <option value="math">按数学成绩</option>
                            <option value="english">按英语成绩</option>
                            <option value="average">按平均分</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>

                    <div class="relative">
                        <select id="sort-order" class="appearance-none bg-gray-100 border border-gray-200 text-gray-700 py-2 pl-3 pr-8 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>

                    <div class="relative">
                        <input type="text" id="search-input" placeholder="搜索学生..." class="bg-gray-100 border border-gray-200 text-gray-700 py-2 pl-10 pr-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 w-full md:w-64">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="fa fa-search text-gray-500"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-white rounded-xl p-5 shadow-md hover-scale">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">学生总数</p>
                        <h3 id="total-students" class="text-2xl font-bold text-dark mt-1">0</h3>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-lg">
                        <i class="fa fa-users text-primary text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="student-progress" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">班级容量: <span id="class-capacity">50</span></p>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-md hover-scale">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">数学平均分</p>
                        <h3 id="math-average" class="text-2xl font-bold text-dark mt-1">0</h3>
                    </div>
                    <div class="bg-secondary/10 p-3 rounded-lg">
                        <i class="fa fa-calculator text-secondary text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-sm text-gray-500">
                        <span>最高分: <span id="math-highest">0</span></span>
                        <span>最低分: <span id="math-lowest">0</span></span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-md hover-scale">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">英语平均分</p>
                        <h3 id="english-average" class="text-2xl font-bold text-dark mt-1">0</h3>
                    </div>
                    <div class="bg-accent/10 p-3 rounded-lg">
                        <i class="fa fa-language text-accent text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="flex justify-between text-sm text-gray-500">
                        <span>最高分: <span id="english-highest">0</span></span>
                        <span>最低分: <span id="english-lowest">0</span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 学生列表区域 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-dark">学生成绩列表</h2>
                <p class="text-sm text-gray-500">点击学生姓名查看详情</p>
            </div>

            <!-- 表格头部 -->
            <div class="hidden md:flex items-center bg-gray-50 border-b border-gray-200 px-4 py-3 text-sm font-medium text-gray-500">
                <div class="w-1/6">学号</div>
                <div class="w-1/6">姓名</div>
                <div class="w-1/6">数学成绩</div>
                <div class="w-1/6">英语成绩</div>
                <div class="w-1/6">平均分</div>
                <div class="w-1/6 text-right">操作</div>
            </div>

            <!-- 学生列表容器 -->
            <div id="students-container" class="max-h-[60vh] overflow-y-auto scrollbar-hide">
                <!-- 学生列表将通过JavaScript动态生成 -->
                <div id="empty-state" class="py-16 flex flex-col items-center justify-center text-center">
                    <div class="bg-gray-100 p-5 rounded-full mb-4">
                        <i class="fa fa-folder-open-o text-gray-400 text-3xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-1">暂无学生数据</h3>
                    <p class="text-gray-500 max-w-md">点击"添加学生"按钮开始录入学生成绩</p>
                    <button id="empty-add-btn" class="mt-4 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fa fa-plus mr-2"></i>
                        <span>添加学生</span>
                    </button>
                </div>
            </div>

            <!-- 加载更多按钮 -->
            <div id="load-more-container" class="p-4 border-t border-gray-200 flex justify-center">
                <button id="load-more-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center transition-all duration-200">
                    <i class="fa fa-refresh mr-2"></i>
                    <span>加载更多</span>
                </button>
            </div>
        </div>
    </main>

    <!-- 添加学生模态框 -->
    <div id="add-student-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="p-5 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-dark">添加学生</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <form id="add-student-form" class="p-5">
                <div class="mb-4">
                    <label for="student-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <input type="text" id="student-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请输入学生姓名">
                    <p id="name-error" class="text-danger text-xs mt-1 hidden">请输入有效的姓名</p>
                </div>

                <div class="mb-4">
                    <label for="math-score" class="block text-sm font-medium text-gray-700 mb-1">数学成绩</label>
                    <input type="number" id="math-score" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="0-100" min="0" max="100">
                    <p id="math-error" class="text-danger text-xs mt-1 hidden">请输入0-100之间的分数</p>
                </div>

                <div class="mb-4">
                    <label for="english-score" class="block text-sm font-medium text-gray-700 mb-1">英语成绩</label>
                    <input type="number" id="english-score" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="0-100" min="0" max="100">
                    <p id="english-error" class="text-danger text-xs mt-1 hidden">请输入0-100之间的分数</p>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" id="cancel-add" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors shadow-md hover:shadow-lg">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 学生详情模态框 -->
    <div id="student-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 transform transition-all duration-300 scale-95 opacity-0" id="detail-modal-content">
            <div class="p-5 border-b border-gray-200 flex justify-between items-center">
                <h3 id="detail-title" class="text-lg font-semibold text-dark">学生详情</h3>
                <button id="close-detail-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <div id="detail-content" class="p-5">
                <!-- 详情内容将通过JavaScript动态生成 -->
            </div>

            <div class="p-5 border-t border-gray-200 flex justify-end">
                <button id="close-detail" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">关闭</button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="fixed top-4 right-4 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-x-full opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notification-icon" class="fa fa-check-circle mr-2"></i>
        <span id="notification-message">操作成功</span>
    </div>

    <script>
        // 数据结构
        const students = [
            { id: 1, name: "张三", math: 90, english: 85 },
            { id: 2, name: "李四", math: 78, english: 92 },
            { id: 3, name: "王五", math: 95, english: 88 },
            { id: 4, name: "赵六", math: 65, english: 70 },
            { id: 5, name: "钱七", math: 85, english: 82 },
            { id: 6, name: "孙八", math: 72, english: 68 },
            { id: 7, name: "周九", math: 88, english: 95 },
            { id: 8, name: "吴十", math: 91, english: 83 },
            { id: 9, name: "郑十一", math: 69, english: 75 },
            { id: 10, name: "王十二", math: 84, english: 89 },
            { id: 11, name: "陈十三", math: 76, english: 73 },
            { id: 12, name: "杨十四", math: 93, english: 90 },
            { id: 13, name: "黄十五", math: 79, english: 81 },
            { id: 14, name: "刘十六", math: 87, english: 77 },
            { id: 15, name: "孙十七", math: 80, english: 86 },
            { id: 16, name: "周十八", math: 82, english: 84 },
            { id: 17, name: "吴十九", math: 71, english: 79 },
            { id: 18, name: "郑二十", math: 83, english: 76 },
            { id: 19, name: "王二十一", math: 94, english: 91 },
            { id: 20, name: "陈二十二", math: 67, english: 72 },
            { id: 21, name: "杨二十三", math: 74, english: 69 },
            { id: 22, name: "黄二十四", math: 89, english: 93 },
            { id: 23, name: "刘二十五", math: 73, english: 78 },
            { id: 24, name: "孙二十六", math: 86, english: 80 },
            { id: 25, name: "周二十七", math: 77, english: 74 },
            { id: 26, name: "吴二十八", math: 92, english: 87 },
            { id: 27, name: "郑二十九", math: 66, english: 64 },
            { id: 28, name: "王三十", math: 81, english: 85 },
            { id: 29, name: "陈三十一", math: 75, english: 71 },
            { id: 30, name: "杨三十二", math: 96, english: 94 },
            { id: 31, name: "黄三十三", math: 68, english: 66 },
            { id: 32, name: "刘三十四", math: 85, english: 83 },
            { id: 33, name: "孙三十五", math: 70, english: 67 },
            { id: 34, name: "周三十六", math: 84, english: 82 },
            { id: 35, name: "吴三十七", math: 72, english: 70 },
            { id: 36, name: "郑三十八", math: 87, english: 86 },
            { id: 37, name: "王三十九", math: 69, english: 65 },
            { id: 38, name: "陈四十", math: 83, english: 81 },
            { id: 39, name: "杨四十一", math: 76, english: 77 },
            { id: 40, name: "黄四十二", math: 90, english: 89 },
            { id: 41, name: "刘四十三", math: 74, english: 73 },
            { id: 42, name: "孙四十四", math: 88, english: 87 },
            { id: 43, name: "周四十五", math: 78, english: 75 },
            { id: 44, name: "吴四十六", math: 89, english: 91 },
            { id: 45, name: "郑四十七", math: 71, english: 68 },
            { id: 46, name: "王四十八", math: 86, english: 85 },
            { id: 47, name: "陈四十九", math: 79, english: 76 },
            { id: 48, name: "杨五十", math: 92, english: 93 },
            { id: 49, name: "黄五十一", math: 73, english: 74 },
            { id: 50, name: "刘五十二", math: 85, english: 84 }
        ];

        // 每页显示的学生数量
        const PAGE_SIZE = 10;
        let currentPage = 1;
        let filteredStudents = [...students];

        // DOM元素
        const studentsContainer = document.getElementById('students-container');
        const addStudentBtn = document.getElementById('add-student-btn');
        const addStudentModal = document.getElementById('add-student-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModal = document.getElementById('close-modal');
        const cancelAdd = document.getElementById('cancel-add');
        const addStudentForm = document.getElementById('add-student-form');
        const studentDetailModal = document.getElementById('student-detail-modal');
        const detailModalContent = document.getElementById('detail-modal-content');
        const closeDetailModal = document.getElementById('close-detail-modal');
        const closeDetail = document.getElementById('close-detail');
        const detailTitle = document.getElementById('detail-title');
        const detailContent = document.getElementById('detail-content');
        const emptyState = document.getElementById('empty-state');
        const emptyAddBtn = document.getElementById('empty-add-btn');
        const loadMoreBtn = document.getElementById('load-more-btn');
        const loadMoreContainer = document.getElementById('load-more-container');
        const notification = document.getElementById('notification');
        const notificationMessage = document.getElementById('notification-message');
        const notificationIcon = document.getElementById('notification-icon');

        // 统计元素
        const totalStudents = document.getElementById('total-students');
        const classCapacity = document.getElementById('class-capacity');
        const studentProgress = document.getElementById('student-progress');
        const mathAverage = document.getElementById('math-average');
        const englishAverage = document.getElementById('english-average');
        const mathHighest = document.getElementById('math-highest');
        const mathLowest = document.getElementById('math-lowest');
        const englishHighest = document.getElementById('english-highest');
        const englishLowest = document.getElementById('english-lowest');

        // 筛选和排序元素
        const sortSubject = document.getElementById('sort-subject');
        const sortOrder = document.getElementById('sort-order');
        const searchInput = document.getElementById('search-input');

        // 初始化
        function init() {
            renderStudents();
            updateStatistics();
            setupEventListeners();
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 添加学生按钮
            addStudentBtn.addEventListener('click', openAddModal);
            emptyAddBtn.addEventListener('click', openAddModal);

            // 关闭模态框
            closeModal.addEventListener('click', closeAddModal);
            cancelAdd.addEventListener('click', closeAddModal);
            closeDetailModal.addEventListener('click', closeDetailModalFn);
            closeDetail.addEventListener('click', closeDetailModalFn);

            // 添加学生表单提交
            addStudentForm.addEventListener('submit', handleAddStudent);

            // 筛选和排序
            sortSubject.addEventListener('change', handleSort);
            sortOrder.addEventListener('change', handleSort);
            searchInput.addEventListener('input', handleSearch);

            // 加载更多
            loadMoreBtn.addEventListener('click', loadMoreStudents);

            // 点击模态框外部关闭
            addStudentModal.addEventListener('click', (e) => {
                if (e.target === addStudentModal) closeAddModal();
            });

            studentDetailModal.addEventListener('click', (e) => {
                if (e.target === studentDetailModal) closeDetailModalFn();
            });
        }

        // 渲染学生列表
        function renderStudents() {
            // 计算当前页应显示的学生
            const startIndex = (currentPage - 1) * PAGE_SIZE;
            const endIndex = startIndex + PAGE_SIZE;
            const pageStudents = filteredStudents.slice(startIndex, endIndex);

            // 清空容器
            studentsContainer.innerHTML = '';

            // 如果没有学生数据，显示空状态
            if (filteredStudents.length === 0) {
                studentsContainer.appendChild(emptyState);
                loadMoreContainer.classList.add('hidden');
                return;
            }

            // 渲染学生列表
            pageStudents.forEach(student => {
                const studentElement = createStudentElement(student);
                studentsContainer.appendChild(studentElement);
            });

            // 更新加载更多按钮状态
            updateLoadMoreButton();
        }

        // 创建单个学生元素
        function createStudentElement(student) {
            const studentElement = document.createElement('div');
            studentElement.className = 'border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors';

            // 计算平均分
            const average = ((student.math + student.english) / 2).toFixed(1);

            // 设置平均分颜色
            let averageClass = 'text-gray-800';
            if (average >= 90) averageClass = 'text-secondary';
            else if (average >= 80) averageClass = 'text-primary';
            else if (average >= 70) averageClass = 'text-accent';
            else if (average >= 60) averageClass = 'text-warning';
            else averageClass = 'text-danger';

            // 设置数学成绩颜色
            let mathClass = 'text-gray-800';
            if (student.math >= 90) mathClass = 'text-secondary';
            else if (student.math >= 80) mathClass = 'text-primary';
            else if (student.math >= 70) mathClass = 'text-accent';
            else if (student.math >= 60) mathClass = 'text-warning';
            else mathClass = 'text-danger';

            // 设置英语成绩颜色
            let englishClass = 'text-gray-800';
            if (student.english >= 90) englishClass = 'text-secondary';
            else if (student.english >= 80) englishClass = 'text-primary';
            else if (student.english >= 70) englishClass = 'text-accent';
            else if (student.english >= 60) englishClass = 'text-warning';
            else englishClass = 'text-danger';

            studentElement.innerHTML = `
                <div class="md:flex md:items-center px-4 py-3">
                    <div class="md:w-1/6 py-2 md:py-0">
                        <span class="text-sm text-gray-500 md:text-gray-700">${student.id}</span>
                    </div>
                    <div class="md:w-1/6 py-2 md:py-0">
                        <button class="text-primary hover:text-primary/80 font-medium student-name" data-id="${student.id}">
                            ${student.name}
                        </button>
                    </div>
                    <div class="md:w-1/6 py-2 md:py-0">
                        <span class="${mathClass} font-medium">${student.math}</span>
                    </div>
                    <div class="md:w-1/6 py-2 md:py-0">
                        <span class="${englishClass} font-medium">${student.english}</span>
                    </div>
                    <div class="md:w-1/6 py-2 md:py-0">
                        <span class="${averageClass} font-medium">${average}</span>
                    </div>
                    <div class="md:w-1/6 py-2 md:py-0 flex justify-between md:justify-end">
                        <button class="text-danger hover:text-danger/80 delete-btn" data-id="${student.id}">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                </div>
            `;

            // 添加点击事件
            const nameButton = studentElement.querySelector('.student-name');
            nameButton.addEventListener('click', () => showStudentDetail(student));

            const deleteButton = studentElement.querySelector('.delete-btn');
            deleteButton.addEventListener('click', () => deleteStudent(student.id));

            return studentElement;
        }

        // 更新统计信息
        function updateStatistics() {
            totalStudents.textContent = students.length;
            classCapacity.textContent = 50;
            studentProgress.style.width = `${(students.length / 50) * 100}%`;

            if (students.length > 0) {
                // 计算数学平均分
                const mathSum = students.reduce((sum, student) => sum + student.math, 0);
                const mathAvg = (mathSum / students.length).toFixed(1);
                mathAverage.textContent = mathAvg;

                // 计算英语平均分
                const englishSum = students.reduce((sum, student) => sum + student.english, 0);
                const englishAvg = (englishSum / students.length).toFixed(1);
                englishAverage.textContent = englishAvg;

                // 计算最高分和最低分
                const mathScores = students.map(student => student.math);
                const englishScores = students.map(student => student.english);

                mathHighest.textContent = Math.max(...mathScores);
                mathLowest.textContent = Math.min(...mathScores);
                englishHighest.textContent = Math.max(...englishScores);
                englishLowest.textContent = Math.min(...englishScores);
            } else {
                mathAverage.textContent = '0';
                englishAverage.textContent = '0';
                mathHighest.textContent = '0';
                mathLowest.textContent = '0';
                englishHighest.textContent = '0';
                englishLowest.textContent = '0';
            }
        }

        // 打开添加学生模态框
        function openAddModal() {
            addStudentModal.classList.remove('hidden');
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);

            // 重置表单
            addStudentForm.reset();
            hideAllErrors();
        }

        // 关闭添加学生模态框
        function closeAddModal() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                addStudentModal.classList.add('hidden');
            }, 300);
        }

        // 关闭学生详情模态框
        function closeDetailModalFn() {
            detailModalContent.classList.remove('scale-100', 'opacity-100');
            detailModalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                studentDetailModal.classList.add('hidden');
            }, 300);
        }

        // 处理添加学生
        function handleAddStudent(e) {
            e.preventDefault();

            // 获取表单值
            const name = document.getElementById('student-name').value.trim();
            const mathScore = parseFloat(document.getElementById('math-score').value);
            const englishScore = parseFloat(document.getElementById('english-score').value);

            // 验证表单
            let isValid = true;

            if (!name) {
                showError('name-error', '请输入有效的姓名');
                isValid = false;
            } else {
                hideError('name-error');
            }

            if (isNaN(mathScore) || mathScore < 0 || mathScore > 100) {
                showError('math-error', '请输入0-100之间的分数');
                isValid = false;
            } else {
                hideError('math-error');
            }

            if (isNaN(englishScore) || englishScore < 0 || englishScore > 100) {
                showError('english-error', '请输入0-100之间的分数');
                isValid = false;
            } else {
                hideError('english-error');
            }

            if (!isValid) return;

            // 创建新学生
            const newStudent = {
                id: students.length > 0 ? Math.max(...students.map(s => s.id)) + 1 : 1,
                name,
                math: mathScore,
                english: englishScore
            };

            // 添加到数组
            students.unshift(newStudent);

            // 更新筛选后的学生数组
            filteredStudents = [...students];

            // 重置分页
            currentPage = 1;

            // 重新渲染学生列表
            renderStudents();

            // 更新统计信息
            updateStatistics();

            // 关闭模态框
            closeAddModal();

            // 显示成功通知
            showNotification('添加学生成功', 'success');
        }

        // 显示学生详情
        function showStudentDetail(student) {
            detailTitle.textContent = `${student.name}的详情`;

            // 计算平均分
            const average = ((student.math + student.english) / 2).toFixed(1);

            // 设置平均分颜色
            let averageClass = 'text-gray-800';
            if (average >= 90) averageClass = 'text-secondary';
            else if (average >= 80) averageClass = 'text-primary';
            else if (average >= 70) averageClass = 'text-accent';
            else if (average >= 60) averageClass = 'text-warning';
            else averageClass = 'text-danger';

            // 准备详情内容
            detailContent.innerHTML = `
                <div class="space-y-4">
                    <div class="flex items-center">
                        <span class="w-24 text-gray-500">学号:</span>
                        <span class="font-medium">${student.id}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-24 text-gray-500">姓名:</span>
                        <span class="font-medium">${student.name}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-24 text-gray-500">数学成绩:</span>
                        <span class="font-medium ${student.math >= 60 ? 'text-secondary' : 'text-danger'}">${student.math}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-24 text-gray-500">英语成绩:</span>
                        <span class="font-medium ${student.english >= 60 ? 'text-secondary' : 'text-danger'}">${student.english}</span>
                    </div>
                    <div class="flex items-center">
                        <span class="w-24 text-gray-500">平均分:</span>
                        <span class="font-medium ${averageClass}">${average}</span>
                    </div>

                    <div class="mt-6">
                        <h4 class="font-medium mb-2">成绩分析</h4>
                        <div class="space-y-3">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-gray-600">数学</span>
                                    <span class="text-sm font-medium ${student.math >= 60 ? 'text-secondary' : 'text-danger'}">${student.math}分</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-secondary h-2 rounded-full" style="width: ${student.math}%"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-gray-600">英语</span>
                                    <span class="text-sm font-medium ${student.english >= 60 ? 'text-secondary' : 'text-danger'}">${student.english}分</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: ${student.english}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // 显示模态框
            studentDetailModal.classList.remove('hidden');
            setTimeout(() => {
                detailModalContent.classList.remove('scale-95', 'opacity-0');
                detailModalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        // 删除学生
        function deleteStudent(id) {
            if (confirm('确定要删除该学生吗？')) {
                // 找到学生索引
                const index = students.findIndex(student => student.id === id);

                if (index !== -1) {
                    // 删除学生
                    students.splice(index, 1);

                    // 更新筛选后的学生数组
                    filteredStudents = [...students];

                    // 重新渲染学生列表
                    renderStudents();

                    // 更新统计信息
                    updateStatistics();

                    // 显示成功通知
                    showNotification('删除学生成功', 'success');
                }
            }
        }

        // 处理排序
        function handleSort() {
            const subject = sortSubject.value;
            const order = sortOrder.value;

            // 根据选择的科目和顺序排序
            filteredStudents.sort((a, b) => {
                let aValue, bValue;

                switch (subject) {
                    case 'name':
                        aValue = a.name;
                        bValue = b.name;
                        break;
                    case 'math':
                        aValue = a.math;
                        bValue = b.math;
                        break;
                    case 'english':
                        aValue = a.english;
                        bValue = b.english;
                        break;
                    case 'average':
                        aValue = (a.math + a.english) / 2;
                        bValue = (b.math + b.english) / 2;
                        break;
                }

                // 根据顺序确定排序方向
                if (order === 'asc') {
                    return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
                } else {
                    return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
                }
            });

            // 重置分页
            currentPage = 1;

            // 重新渲染学生列表
            renderStudents();
        }

        // 处理搜索
        function handleSearch() {
            const searchTerm = searchInput.value.toLowerCase().trim();

            if (searchTerm === '') {
                // 如果搜索框为空，显示所有学生
                filteredStudents = [...students];
            } else {
                // 根据搜索词筛选学生
                filteredStudents = students.filter(student =>
                    student.name.toLowerCase().includes(searchTerm) ||
                    student.id.toString().includes(searchTerm)
                );
            }

            // 重置分页
            currentPage = 1;

            // 重新渲染学生列表
            renderStudents();
        }

        // 加载更多学生
        function loadMoreStudents() {
            // 增加当前页码
            currentPage++;

            // 重新渲染学生列表
            renderStudents();
        }

        // 更新加载更多按钮状态
        function updateLoadMoreButton() {
            const totalPages = Math.ceil(filteredStudents.length / PAGE_SIZE);

            if (currentPage >= totalPages) {
                loadMoreContainer.classList.add('hidden');
            } else {
                loadMoreContainer.classList.remove('hidden');
            }
        }

        // 显示错误信息
        function showError(errorId, message) {
            const errorElement = document.getElementById(errorId);
            errorElement.textContent = message;
            errorElement.classList.remove('hidden');
        }

        // 隐藏错误信息
        function hideError(errorId) {
            document.getElementById(errorId).classList.add('hidden');
        }

        // 隐藏所有错误信息
        function hideAllErrors() {
            hideError('name-error');
            hideError('math-error');
            hideError('english-error');
        }

        // 显示通知
        function showNotification(message, type = 'success') {
            notificationMessage.textContent = message;

            // 设置通知图标
            if (type === 'success') {
                notificationIcon.className = 'fa fa-check-circle mr-2';
                notificationIcon.classList.remove('text-danger');
                notificationIcon.classList.add('text-secondary');
            } else {
                notificationIcon.className = 'fa fa-exclamation-circle mr-2';
                notificationIcon.classList.remove('text-secondary');
                notificationIcon.classList.add('text-danger');
            }

            // 显示通知
            notification.classList.remove('translate-x-full', 'opacity-0');
            notification.classList.add('translate-x-0', 'opacity-100');

            // 3秒后自动隐藏
            setTimeout(() => {
                notification.classList.remove('translate-x-0', 'opacity-100');
                notification.classList.add('translate-x-full', 'opacity-0');
            }, 3000);
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
